<template>
  <div class="layout">
    <div>
      <!--  -->
      <div id="searchDiv">
        <span id="searchTitle">一站式政策信息服务</span>
        <div id="searchBox">
          <el-select id="selectBox" v-model.trim="searchType">
            <el-option
              v-for="searchTypeOption in searchTypeOptions"
              :key="searchTypeOption.dictValue"
              :value="searchTypeOption.dictValue"
              :label="searchTypeOption.dictLabel"
              style="font-size: 16px"
            ></el-option>
          </el-select>
          <el-input v-model.trim="searchStr" style="width: 400px" placeholder="请输入您要搜索的服务"></el-input>
          <div id="searchBtn" @click="searchPolicy">搜 索</div>
        </div>
        <div id="hotDiv">
          <span>热门搜索：</span>
          <div id="hotWordDiv">
            <span
              v-for="(hotWord,index) in hotWords"
              :key="index"
              class="hotWord"
              @click="searchHotWord(hotWord)"
            >{{hotWord}}</span>
          </div>
        </div>
      </div>
      <div id="introduceDiv">
        <div class="introduceBox" @click="hrefTo('/policy/policyList')">
          <div style="width:46px">
            <PublicImage :src="require('@/assets/image/policy/logoPaper.png')"></PublicImage>
          </div>
          <span class="introduceName">政策清单</span>
          <span class="introduceTitle">提供各类政策便捷查询服务</span>
        </div>
        <div class="separateLine"></div>
        <div class="introduceBox" @click="hrefTo('/policy/policyCash')">
          <div style="width:50px">
            <PublicImage :src="require('@/assets/image/policy/logoBook.png')"></PublicImage>
          </div>
          <span class="introduceName">政策兑现</span>
          <span class="introduceTitle">政策申报兑现流程一目了然</span>
        </div>
        <div class="separateLine"></div>
        <div class="introduceBox" @click="hrefTo('/policy/policyRecommend')">
          <div style="width:50px">
            <PublicImage :src="require('@/assets/image/policy/logoHand.png')"></PublicImage>
          </div>
          <span class="introduceName">智能推荐</span>
          <span class="introduceTitle">智能推送企业相关政策，不错过任何优惠福利</span>
        </div>
      </div>
      <NewestBar></NewestBar>
      <div id="policysDiv">
        <div id="doingDiv">
          <ContainerTitle text="申报进行中" @jump="$router.push({path: '/policy/policyList'})" :more="true"></ContainerTitle>
          <policyFrameSearch
            style="border-bottom: 1px solid #eeeeee"
            v-for="policy in policys"
            :policy="policy"
            :key="policy.id"
          ></policyFrameSearch>
        </div>
        <div id="showingDiv">
          <ContainerTitle text="兑现结果公示" @jump="$router.push({path: '/policy/policyCash'})" :more="true"></ContainerTitle>
          <div class="announceDiv" v-for="(announce, index) in announces" :key="index">
            <div
              class="policyName"
              @click="$router.push({path: '/policy/policyDetail', query: {id: announce.policyId, selectTypeIndex: 2}})"
            >{{announce.policyName}}</div>
            <!-- <div class="policyTypeName"
						 :style="'color: ' + formatLabel(announce.policyTypeName).color + '; background-color: ' + formatLabel(announce.policyTypeName).bgColor">
						{{formatLabel(announce.policyTypeName).label}}
            </div>-->
            <!-- <div class="policyTypeName">{{ announce.policyTypeName }}</div> -->
            <div class="tip tipfirst">
              <span class="policyNo ellipsis">{{announce.policyNo}}</span>
              <span>公示日期：{{announce.announceDate}}</span>
            </div>
            <div class="tip">
              <span class="redemptionDeptName ellipsis">兑现部门：{{announce.redemptionDeptName}}</span>
            </div>
            <!-- <div class="redemptionDeptName">{{'·兑现部门：' + announce.redemptionDeptName}}</div>
            <div class="announceDate">{{'·公示日期：' + announce.announceDate}}</div>-->
          </div>
        </div>
      </div>
      <!--  -->
      <FloatBar></FloatBar>
    </div>
  </div>
</template>

<script>
import NewestBar from '@/components/newestBar'
import policyFrameSearch from './components/policyFrameSearch'
import FloatBar from '@/components/floatBar'

import { formatLabel, isEmptyStr } from '@/utils/util.js'
import { getDoingPolicys, getAnnounces, getSearchTypeAndHotWords } from "@/common/api/policy.js";

export default {
  name: 'policy',
  components: { NewestBar, policyFrameSearch, FloatBar },
  data() {
    return {
      searchType: null,
      searchTypeOptions: [],
      searchStr: '',
      hotWords: [],
      policys: [],
      announces: [],
    }
  },
  methods: {
    /**
     * 搜索热词
     * @param hotWord 热词对象
     */
    searchHotWord(hotWord) {
      let ns = this
      ns.searchStr = hotWord
      ns.searchPolicy()
    },
    /**
     * 点击搜素事件
     */
    searchPolicy() {
      let ns = this
      let searchTypeLabel = ''
      for (let i = 0; i < ns.searchTypeOptions.length; i++) {
        if (ns.searchTypeOptions[i].dictValue == ns.searchType) {
          searchTypeLabel = ns.searchTypeOptions[i].dictLabel
        }
      }
      ns.$router.push({
        path: '/policy/policySearch',
        query: {
          wd: ns.searchStr,
          type: ns.searchType,
          typeLabel: searchTypeLabel,
        },
      })
    },
    /**
     * 获取搜索类型和热词
     */
    async getSearchTypeAndHotWords() {
      let ns = this
      ns.searchTypeOptions = []
      ns.hotWords = []
      let res = await getSearchTypeAndHotWords()
      ns.searchTypeOptions = res.data.searchType
      ns.hotWords = res.data.hotKey
      console.log(res.data.hotKey)
      ns.searchType = ns.searchTypeOptions[0].dictValue
    },
    /**
     *获取申报中政策
     */
    async getDoingPolicys() {
      let ns = this
      ns.policys = []
      let data = {
        pageNum: 1,
        pageSize: 5,
        entrance: 1,
        status: 2,
      }
      let res = await getDoingPolicys(data)
      ns.policys = res.rows
      for (let i = 0; i < ns.policys.length; i++) {
        ns.policys[i].description = ns.policys[i].description.replace(
          /<[^<>]+>/g,
          ''
        )
      }
    },
    /**
     * 格式化标签
     * @param label 标签名
     * @return {string|*} 标签名对象
     */
    formatLabel(label) {
      return formatLabel(label)
    },
    /**
     * 获取兑现结果公示政策信息
     */
    async getAnnounces() {
      let ns = this
      ns.announces = []
      let data = {
        pageNum: 1,
        pageSize: 6,
      }
      let res = await getAnnounces(data)
      ns.announces = res.rows
    },
    /**
     * 跳转页面
     * @param url 要跳转的页面
     */
    hrefTo: function (url) {
      let ns = this
      ns.$router.push({ path: url })
    },
    /**
     * 跳转到政策详情页面
     */
    toPolicyDetail: function (policy) {
      let ns = this
      ns.$router.push({ path: 'policyDetail', query: { id: policy.id } })
    },
  },
  mounted() {
  	let ns = this
  	ns.getSearchTypeAndHotWords()
  	ns.getDoingPolicys()
  	ns.getAnnounces()
  },
  // activated() {
  //   let ns = this
  //   ns.getSearchTypeAndHotWords()
  //   ns.getDoingPolicys()
  //   ns.getAnnounces()
  // },
}
</script>

<style scoped>
#searchDiv {
  height: 440px;
  background: url('~@/assets/image/policy/searchBg.png') no-repeat center top;
  padding-top: 60px;
  margin-bottom: 200px;
}

#searchDiv #searchTitle {
  color: #ffffff;
  font-size: 40px;
}

#searchDiv #searchBox {
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  width: 590px;
  align-items: center;
}

#searchDiv #searchBox .el-select {
  width: 120px;
  font-size: 16px;
}

/deep/ #searchDiv #searchBox .el-input__inner {
  border-radius: 0;
  height: 50px;
}

/deep/ #searchDiv #searchBox #selectBox {
  font-weight: bold;
  font-size: 16px;
}

#searchDiv #searchBox #searchBtn {
  background-color: #f13738;
  color: #ffffff;
  height: 50px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#searchDiv #searchBox #searchBtn:hover {
  cursor: pointer;
}

#searchDiv #hotDiv {
  color: #ffffff;
  display: flex;
  justify-content: left;
  margin: 0 auto;
  margin-top: 30px;
  font-size: 15px;
  width: 462px;
  text-align: left;
  padding-left: 128px;
  font-size: 14px;
}

#searchDiv #hotDiv #hotWordDiv {
  flex-wrap: wrap;
  /* justify-content: left; */
  /* align-items: flex-end; */
  align-items: center;
  width: 200px;
  /* max-width: 450px; */
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#searchDiv #hotDiv #hotWordDiv .hotWord {
  margin-right: 10px;
  text-decoration: underline;
}

#searchDiv #hotDiv #hotWordDiv .hotWord:hover {
  cursor: pointer;
}

#introduceDiv {
  width: 1000px;
  height: 250px;
  background-color: #ffffff;
  margin: auto;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  margin-top: -300px;
  box-shadow: 0px 0px 10px #888888;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#introduceDiv .introduceBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 330px;
}

#introduceDiv .introduceBox:hover {
  cursor: pointer;
}

#introduceDiv .separateLine {
  height: 150px;
  width: 2px;
  background-color: #e1e1e1;
}

#introduceDiv .introduceBox .introduceName {
  font-weight: bold;
  font-size: 20px;
  margin: 15px 0;
}

#introduceDiv .introduceBox .introduceTitle {
  font-size: 14px;
  color: #666666;
}

#policysDiv {
  display: flex;
  justify-content: center;
}

#policysDiv #doingDiv {
  width: 670px;
  margin-right: 30px;
  padding: 50px 0;
}

#doingDiv .doingTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 3px solid #045db9;
  margin-bottom: 20px;
  font-weight: bold;
}

#policysDiv #showingDiv {
  padding: 50px 0;
  width: 300px;
}

#showingDiv .showingTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 3px solid #045db9;
  margin-bottom: 20px;
  font-weight: bold;
}

#showingDiv .announceDiv {
  text-align: left;
  margin: 10px;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}

.announceDiv .policyName {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.policyNo{
  display: inline-block ;
  width: 150px;
  vertical-align:bottom; 
}
.redemptionDeptName{
  display: inline-block ;
  width: 100%;
}
.tipfirst{
  margin-bottom: 6px;
}
.announceDiv .policyName:hover {
  cursor: pointer;
  color: #045db9;
}

.announceDiv .policyTypeName {
  font-size: 12px;
  /* background-color: #F7F1EB;
		color: #f09450; */
  background: #f4fbff;
  color: #5f89e6;
  display: inline-block;
  padding: 5px;
  margin: 10px 0;
}

.announceDiv .redemptionDeptName {
  font-size: 12px;
  color: #999999;
  line-height: 200%;
}

.announceDiv .announceDate {
  font-size: 12px;
  color: #999999;
}
.tip {
  font-size: 12px;
  color: #999999;
}
.more {
  font-size: 12px;
}

.more:hover {
  cursor: pointer;
  text-decoration: underline;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
/* 热门搜索：不换行 */
#hotDiv {
  overflow: hidden;
  display: -webkit-box;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
</style>
